<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 15px" class="box-card">
      <el-alert title="添加商品信息" type="info" center show-icon :closable="false">
      </el-alert>
      <el-steps :active="tabPosition * 1" align-center style="margin-top: 15px" finish-status="success">
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-tabs tab-position="left" style="margin-top: 15px" v-model="tabPosition" :before-leave="beforeLeave"
          @tab-click="tabClicked">
          <el-tab-pane label="用户管理" name="0">
            <el-form-item label="商品名称" prop="goods_name">
              <el-input v-model="ruleForm.goods_name" style="margin-top: 15px"></el-input>
            </el-form-item>
            <el-form-item label="商品价格" prop="goods_price">
              <el-input v-model="ruleForm.goods_price" style="margin-top: 15px" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品重量" prop="goods_weight">
              <el-input v-model="ruleForm.goods_weight" style="margin-top: 15px" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品数量" prop="goods_number">
              <el-input v-model="ruleForm.goods_number" style="margin-top: 15px" type="number"></el-input>
            </el-form-item>
            <el-form-item label="商品分类" prop="goods_cat">
              <el-cascader v-model="checkedCateArr" :options="list" :props="cateProps"></el-cascader>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="配置管理" name="1">
            <el-form-item v-for="item1 in manyparams" :key="item1.attr_id" :label="item1.attr_name">
              <el-checkbox-group v-model="item1.attr_vals">
                <el-checkbox v-for="(item2, index) in item1.attr_vals" :label="item2" :key="index" border></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="角色管理" name="2">
            <el-form-item v-for="item in onlyparams" :key="item.attr_id" :label="item.attr_name">
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
          </el-tab-pane>
          <el-tab-pane label="商品图片" name="3">
            <el-upload class="upload-demo" action="http://www.ysqorz.top:8888/api/private/v1/upload"
              :on-preview="handlePreview" :on-remove="handleRemove" :on-success="handleSuccess" :file-list="fileList"
              :headers="headers" list-type="picture">
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png文件，且不超过500kb
              </div>
            </el-upload>
          </el-tab-pane>
          <el-tab-pane label="商品内容" name="4">
            <quill-editor v-model="ruleForm.goods_introduce" />
            <el-button type="primary" @click="add">添加商品</el-button>
          </el-tab-pane>
        </el-tabs>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import _ from "lodash";
  import {
    getgoodscategoriesApi,
    getcategoriesApi,
    getgoodsAddApi,
  } from "@/http/api";
  export default {
    data() {
      return {
        headers: {
          Authorization: sessionStorage.getItem("token"),
        },
        fileList: [],
        manyparams: [],
        onlyparams: [],
        cateProps: {
          label: "cat_name",
          value: "cat_id",
          children: "children",
          expandTrigger: "hover",
        },
        checkedCateArr: [],
        list: [],
        tabPosition: 0,
        ruleForm: {
          goods_name: "",
          goods_price: 0,
          goods_weight: 0,
          goods_number: 0,
          goods_cat: [],
          pics: [],
          goods_introduce: "",
          attrs: [],
        },
        rules: {
          goods_name: [{
            required: true,
            message: "请输入商品信息",
            trigger: "blur",
          }, ],
          goods_price: [{
            required: true,
            message: "请输入商品价格",
            trigger: "blur",
          }, ],
          goods_weight: [{
            required: true,
            message: "请输入商品重量",
            trigger: "blur",
          }, ],
          goods_number: [{
            required: true,
            message: "请输入商品数量",
            trigger: "blur",
          }, ],
        },
      };
    },
    components: {},
    created() {
      this.getgoodscategories();
    },
    mounted() {},
    methods: {
      async add() {
        this.ruleForm.goods_cat = this.checkedCateArr.join(",");
        let params = _.cloneDeep(this.manyparams);
        params = params.map((item) => {
          return {
            attr_id: item.attr_id,
            attr_value: item.attr_vals,
          };
        });
        let paramsonly = _.cloneDeep(this.onlyparams);
        paramsonly = paramsonly.map((item) => {
          return {
            attr_id: item.attr_id,
            attr_value: item.attr_vals,
          };
        });
        let list = [...params, ...paramsonly];
        this.ruleForm.attrs = list;
        console.log(this.ruleForm, "one");
        let res = _.cloneDeep(this.ruleForm);
        await getgoodsAddApi(res);
        this.$router.push("/goods");
      },
      handleSuccess(file, fileList) {
        let picobj = {
          pic: file.data.tmp_path,
        };
        this.ruleForm.pics.push(picobj);
        console.log(this.ruleForm.pics, 111);
      },
      handleRemove(file, fileList) {
        const temp = file.response.data.temp;
        const index = this.ruleForm.pics.findIndex((item) => {
          return item.pic === temp;
        });
        this.ruleForm.pics.splice(index, 1);
      },
      handlePreview(file) {
        console.log(file);
      },
      async tabClicked() {
        console.log(this.tabPosition);
        if (this.tabPosition === "1") {
          const res = await getcategoriesApi(this.cateId);
          // console.log(this.cateId);
          // console.log("动态", res);
          res.forEach((item) => {
            item.attr_vals = item.attr_vals.split(",");
          });
          this.manyparams = res;
          // console.log(this.manyparams, 111);
        } else if (this.tabPosition === "2") {
          const res = await getcategoriesApi(this.cateId, "only");
          // console.log("静态", res);
          this.onlyparams = res;
        }
      },
      beforeLeave(activeName, oldActiveName) {
        // console.log(activeName)
        // console.log(oldActiveName)
        if (oldActiveName === "0" && this.checkedCateArr.length < 3) {
          this.$message({
            message: "您必须选择完三级分类后，才能进行下一步的选择",
            type: "error",
          });
          return false;
        }
      },
      getgoodscategories() {
        getgoodscategoriesApi().then((res) => {
          // console.log(res, 111);
          this.list = res;
        });
      },
    },
    computed: {
      cateId() {
        return this.checkedCateArr[this.checkedCateArr.length - 1];
      },
    },
    watch: {},
  };

</script>

<style scoped lang='scss'>
  ::v-deep .el-form-item__label {
    width: 100%;
    text-align: left;
  }

  ::v-deep .ql-container {
    height: 300px;
  }

</style>
